<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">商品详情</block>
			<block slot="right">
				<text class="cuIcon-forward" />
				<text class="cuIcon-more" />
			</block>
		</bar-title>

		<!--提示-->
		<view class="bg-grey text-sm text-center padding-tb-xs text-white">真品实拍</view>

		<!--轮播图-->
		<view class="zaiui-banner-swiper-box">
			<swiper class="screen-swiper" circular autoplay @change="bannerSwiper">
				<swiper-item v-for="(item,index) in goodinfo.goods_gallery_urls" :key="index">
					<image :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!--页码-->
			<text class="cu-tag bg-grey round sm zaiui-page">{{bannerCur + 1}} / {{goodinfo.goods_gallery_urls.length}}</text>
		</view>

		<!--限时秒杀-->
		<view class="zaiui-limited-seckill-box">
			<text class="text-price text-xxl">{{goodinfo.min_group_price/100}}</text>
			<view class="text-xs zaiui-cost-price-num price-4">
				<view class="text-through">原价￥{{goodinfo.min_normal_price/100}}</view>
				<view>剩余{{goodinfo.predict_promotion_rate}}件</view>
			</view>
		</view>

		<!--标题-->
		<view class="bg-white zaiui-view-box zaiui-title-view-box">
			<view class="title-view">
				<text class="text-black text-lg text-bold">{{goodinfo.goods_name}}</text>
			</view>
			<view class="light bg-red radius margin-top-sm zaiui-title-tip-box">
				<view class="text-cut">
					<text class="margin-right-sm">{{goodinfo.mall_name}}</text>
					<text class="text-sm">{{goodinfo.goods_desc}}</text>
				</view>
			</view>
		</view>

		<!--服务-->
		<view class="margin-top bg-white zaiui-view-box zaiui-service-view-box">
			<view class="flex flex-wrap text-sm">
				<view class="basis-1">
					<text class="text-gray">服务</text>
				</view>
				<view class="basis-7">
					<view>
						<text v-for="(item,index) in goodinfo.unified_tags" :key="index" class="tag-view">
							<text class="cuIcon-title text-red" />
							<text>{{item}}</text>
						</text>
					</view>
				</view>
				<view class="basis-2">
					<view class="text-gray text-right icon-view">
						<text class="cuIcon-right icon" />
					</view>
				</view>
			</view>
		</view>

		<!--选择-->
		<view class="margin-top bg-white zaiui-view-box zaiui-select-view-box">
			<view class="flex flex-wrap text-sm">
				<view class="basis-1">
					<text class="text-gray">发货</text>
				</view>
				<view class="basis-9">
					<text class="text-sm">16:00前下单，当日发货，顺丰包邮(部分地区除外)</text>
				</view>
			</view>
		</view>

		<!--评论-->
		<view class="margin-top bg-white zaiui-comment-view-box">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="text-black text-lg">评价（3699）</text>
				</view>
				<view class="action">
					<view class="text-sm">
						<text class="margin-right-xs">好评率</text>
						<text class="text-black text-lg">97%</text>
						<text class="cuIcon-right icon margin-left-xs" />
					</view>
				</view>
			</view>
			<view class="zaiui-border-view" />
			<view class="zaiui-view-box">
				<view class="flex flex-wrap text-sm">
					<view class="basis-1">
						<view class="cu-avatar sm round" style="background-image:url(/static/images/avatar/1.jpg)" />
					</view>
					<view class="basis-9 text-sm">
						<view>小二</view>
						<view class="margin-top-xs">性价比很棒</view>
						<view class="text-gray margin-top-sm">灰色</view>
					</view>
				</view>
			</view>
			<view class="zaiui-border-view" />
			<view class="zaiui-view-box">
				<view class="flex flex-wrap text-sm">
					<view class="basis-1">
						<view class="cu-avatar sm round" style="background-image:url(/static/images/avatar/1.jpg)" />
					</view>
					<view class="basis-9 text-sm">
						<view>小三</view>
						<view class="margin-top-xs">漂亮完美</view>
						<view class="text-gray margin-top-sm">黑色</view>
					</view>
				</view>
			</view>
		</view>

		<!--杂项信息-->
		<view class="margin-top bg-white zaiui-view-box zaiui-goods-info-view-box">
			<view class="zaiui-shop-view">
				<view class="cu-avatar lg round" style="background-image:url(/static/images/avatar/1.jpg)" />
				<view class="text-view">
					<view class="margin-bottom-xs">仔仔店铺</view>
					<view class="text-sm text-cut">仔仔店铺，正品保障，售后无忧</view>
				</view>
				<button class="cu-btn radius sm line-red">全部商品</button>
			</view>
		</view>

		<!--图片详情-->
		<view class="margin-top zaiui-goods-details-box">
			<image v-for="(item,index) in  goodinfo.goods_gallery_urls" :key="index" :src="item" mode="widthFix" />
		</view>

		<!--常见问题-->
		<view class="margin-top bg-white margin-bottom zaiui-view-box zaiui-goods-help-view-box">
			<view class="text-black text-lg margin-bottom-sm">常见问题</view>
			<view class="flex flex-wrap margin-bottom">
				<view class="basis-1">
					<text class="cu-tag bg-grey radius sm">问</text>
				</view>
				<view class="basis-9">
					<view class="margin-bottom-xs text-black">是正品吗?有保障吗?</view>
					<view class="text-sm">你猜啊</view>
				</view>
			</view>
			<view class="flex flex-wrap margin-bottom">
				<view class="basis-1">
					<text class="cu-tag bg-grey radius sm">问</text>
				</view>
				<view class="basis-9">
					<view class="margin-bottom-xs text-black">好用吗?</view>
					<view class="text-sm">你再猜，继续猜</view>
				</view>
			</view>
			<view class="zaiui-border-view" />
			<view class="text-center text-blue">查看更多问题</view>
		</view>

		<!--相似推荐-->
		<view class="margin-top zaiui-view-box zaiui-recommend-list-view-box">
			<view class="flex flex-wrap">
				<view class="basis-sm text-right">
					<image class="img-aau" src="/static/zaiui/img/aau.png" lazy-load mode="widthFix" />
				</view>
				<view class="basis-xs text-center">
					<text class="text-black text-lg">相似推荐</text>
				</view>
				<view class="basis-sm text-left">
					<image class="img-aau" src="/static/zaiui/img/aau.png" lazy-load mode="widthFix" />
				</view>
			</view>

			<view class="margin-bottom zaiui-goods-list-box">
				<view class="grid col-2">
					<block v-for="(items,indexs) in goodsList" :key="indexs">
						<view class="list-itme" @click="selectGoods(items)">
							<view class="bg-white list-radius">
								<view class="goods-img">
									<view class="cu-avatar" :style="[{backgroundImage:'url('+ items.img +')'}]" />
									<view class="mold-view">
										<text class="cu-tag radius sm bg-red">{{items.username}}</text>
									</view>
								</view>
								<view class="view-goods-info">
									<view class="text-cut-2 text-black text-sm margin-bottom-sm">{{items.title}}</view>
									<view class="text-price text-red text-lg">{{items.price}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!--占位底部距离-->
		<view class="cu-tabbar-height" />

		<!--底部操作-->
		<view class="zaiui-footer-fixed">
			<view class="cu-bar bg-white tabbar border shop">
				<view class="action" @tap="myCartTap">
					<view class="cuIcon-cart">
						<view class="cu-tag badge">{{cartNum}}</view>
					</view>
					<text>购物车</text>
				</view>
				<view class="btn-group">
					<button class="cu-btn bg-orange radius shadow-blur" @tap="addCart">加入购物车</button>
					<button class="cu-btn bg-red radius shadow-blur" @tap="selectTap">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';

	import _goods_data from '@/static/zaiui/data/goods.js'; //虚拟数据
	import _tool from '@/static/zaiui/util/tools.js'; //工具函数
	import {
		search,
		info
	} from '@/http/request.js'
	import {
		shopCart,
		userOrder,
		viewHistory
	} from '@/utils/storage.js'
	export default {
		components: {
			barTitle,
		},
		data() {
			return {
				bannerCur: 0,
				bannerList: [],
				bottomModal: false,
				modalTitle: '',
				modalType: 'promotion',
				selectType: '',
				goodsList: [],
				goodinfo: {},
				keyword: '',
				cartNum: shopCart.get().length,
			}
		},
		onLoad(options) {
			this.keyword = options.type;
			this.goodsInfo(options);
			this.tuijian(options);
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		//触底了
		onReachBottom() {
			this.tuijian();
		},
		methods: {
			selectGoods({
				goods_sign,
				search_id
			}) {
				uni.navigateTo({
					url: `/pages/goods/goods?goods_sign=${goods_sign}&search_id=${search_id}&type=${this.keyword}`
				});
			},
			async goodsInfo(option) {
				let res = await info(option);
				this.goodinfo = res
				let vhistory = viewHistory.get();
				if(!vhistory.find(v=> v && (v.goods_id == res.goods_id))){
					vhistory.push(res)
					viewHistory.set(vhistory)
				}
			},
			async tuijian() {
				let res = await search(this.keyword, Math.floor(Math.random() * 20));
				this.goodsList.push(...res)
			},
			bannerSwiper(e) {
				this.bannerCur = e.detail.current;
			},
			addCart() {
				let cartList = shopCart.get();
				cartList.push(this.goodinfo);
				shopCart.set(cartList);
				uni.showToast({
					title: '添加成功',
					mask:true,
					success: () => {
						this.cartNum++
					}
				})
			},
			selectTap(type) {
				this.goodinfo.num = 1;
				userOrder.set([this.goodinfo]);
				uni.navigateTo({
					url: '/pages/goods/settlement'
				});

			},
			myCartTap() {
				uni.navigateTo({
					url: '/pages/app/index?tabID=2'
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/zaiui/style/goods.scss";
</style>
